<template>
    <el-form :inline="true" :model="formData">
        <el-form-item label="单号">
            <el-input v-model="formData.id" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
           <el-input v-model="formData.productName" placeholder="请输入关键字" clearable />
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="采购单号" width="220" />
        <el-table-column prop="productName" label="商品名称" show-overflow-tooltip width="180" />
        <el-table-column prop="qty" label="库存" width="120" />
        <el-table-column prop="saleCount" label="销售量" width="80" />
        <el-table-column prop="version" label="版本号" width="80" />
        <el-table-column fixed="right" label="操作" min-width="240">
            <template #default="scope">
                <el-button type="primary" size="small" @click="editClick(scope.row)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br />
    <el-pagination background :page-size="pageData.pageSize" @change="pageChange" layout="prev, pager, next"
        :total="pageData.total" />
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import poApi from '@/api/po'
import { dayjs } from 'element-plus'
import { inventoryinApi } from '@/api'

const router = useRouter()

const tableData = ref<any>([])
const formData = reactive({ id: "", productName: "" })

const pageData = reactive({
    total: 0,
    pageNum: 1,
    pageSize: 3,

})

const pageChange = (currentPage: number, pageSize: number) => {
    pageData.pageNum = currentPage
    pageData.pageSize = pageSize
    callApi()
}


onMounted(() => {
    callApi()
})

const callApi = () => {
    let params: any = {}
    params.id = formData.id != "" ? formData.id : undefined
    params.productName = formData.productName 
    params.pageNum = pageData.pageNum
    params.pageSize = pageData.pageSize
    poApi.select(params).then((res: any) => {
        pageData.total = res.total
        tableData.value = res.items
    })
}

const onsubmit = () => {
    inventoryinApi.select(formData).then((res: any) => {
        pageData.total = res.total
        tableData.value = res.items
    })
}

const editClick = (row: any) => {
    router.push({ name: "in-detail", query: { id: row.id } })
}


</script>